<template>
	<div 
	v-if="noticeInfo"
	class="notice-info-wrap" >
		<van-nav-bar
		  title="公告详情"
		  left-arrow
		  fixed
		  @click-left="onClickLeft"
		/>
		
		<div class="notice-li" >
			<div class="notice-name" >
				<img class="notice-tag" :src="noticeInfoIcon" alt="">
				<span class="notice-title" >{{ noticeInfo.title }}</span>
			</div>
			<div class="notice-content" v-html="noticeInfo.content" ></div>
			<div class="notice-time" >{{ noticeInfo.publish_time }}</div>
		</div>
		
	</div>
</template>
<script>
	import { noticeInfoIcon } from '@/tool/static-img';
	import { NOTICE_READ } from '@/api/home';
	export default {
		data() {
			return {
				noticeInfoIcon,
				noticeInfo: null
			}
		},
		created() {
			
			this.noticeInfo = JSON.parse(localStorage.getItem('noticeInfo'));

			// 清除未读
			this.clearRead()
		},
		methods: {
			onClickLeft() {
				this.$router.back()
			},
			clearRead() {
				this.$http.post(NOTICE_READ + this.noticeInfo.id)
			}
		}
	}
</script>
<style lang="scss" >
	.notice-info-wrap{
		min-height: 100vh;
		padding-top: 46px;
		background-color: #fff;
		box-sizing: border-box;
		.van-nav-bar .van-icon{
			color: #333333;
		}
		.van-nav-bar__arrow{
			font-size: 20px;
		}
		.notice-li{
			padding: 0.32rem;
			.notice-name{
				display: inline-flex;
				margin-bottom: 0.24rem;
				.notice-tag{
					width: 0.4rem;
					height: 0.4rem;
				}
				.notice-title{
					margin-left: 0.16rem;
					font-weight: 500;
					font-size: 0.32rem;
					color: #333333;
				}
			}
			.notice-content{
				margin-bottom: 0.16rem;
				line-height: 0.4rem;
				font-weight: 400;
				font-size: 0.28rem;
				color: #999999;
			}
			.notice-time{
				height: 0.34rem;
				line-height: 0.34rem;
				font-weight: 400;
				font-size: 0.24rem;
				color: #c3c3c3;
			}
		}
	}
</style>

